<template>
    <div class="worthBuying_info">
        <navbar :title="'值得买'"></navbar>

        <div class="worthBuying_banners">

            <div class="worthBuying_banners_title">
                <img class="img_title" src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="">
                <div class="title">严选好物 &nbsp; 用心生活</div>
                <img class="img_bg" src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView"
                    alt="">
            </div>

            <!-- 轮播图 -->
            <div class="banners">

                <van-swipe :show-indicators="false" :width="88.75" :height="270" class="my-swipe" slidesPerView="2" :stop-propagation="false"
                    indicator-color="red" :loop='false'>

                    <van-swipe-item class="swipe_item"
                        v-for="(baneerList, index) in worthBuyingBaneerList.filter((item, idex) => idex <= 6)" :key="index">
                        <div class="my_swipe_item" >

                            <div class="banners_item" @click="toInfo">
                                <a :href="baneerList.columnUrl" target="_blank">
                                    <img :src="baneerList.picUrl" alt="">
                                    <div class="banners_item_title">{{ baneerList.mainTitle }}</div>
                                    <div class="banners_item_info">{{ baneerList.viceTitle }}</div>
                                </a>
                                
                            </div>

                            <div class="banners_item" @click="toInfo">
                                <a :href="baneerList.columnUrl" target="_blank">
                                    <img :src="worthBuyingBaneerList[index + 7].picUrl" alt="">
                                    <div class="banners_item_title">{{ worthBuyingBaneerList[index + 7].mainTitle }}</div>
                                    <div class="banners_item_info">{{ worthBuyingBaneerList[index + 7].viceTitle }}</div>
                                </a>
                            </div>
                        </div>
                    </van-swipe-item>
                </van-swipe>

            </div>
        </div>

        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="WorthBuyingList">
                    <div class="WorthBuyingList_item_left" v-for="(list, index) in goodsList" :key="index">
                        <div class="item_left">
                            <a href="http://you.163.com/topic/v1/pub/qZ0iRVfSYypP.html" target="_blank">
                                <img class="WorthBuyingList_item_img" :src="list.look?.picUrl" alt="" @click="toInfo">
                            </a>
                            <div class="WorthBuyingList_item_title">{{ list.look.title }}</div>
                            <div class="WorthBuyingList_item_detail">
                                <div class="WorthBuyingList_item_name">
                                    <img :src="list.look?.avatar" alt="">
                                    <div>{{ list.look.nickname }}</div>
                                </div>
                                <div class="WorthBuyingList_item_upText">
                                    <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" alt="">
                                    <div>{{ list.look.readCount }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="WorthBuyingList_item_right" v-for="(list, index) in goodsList" :key="index">
                        <div class="item_right">
                            <a href="http://you.163.com/topic/v1/pub/uHtapk1DmDeI.html" target="_blank">
                                <img class="WorthBuyingList_item_img" :src="list.look?.picUrl" alt="" @click="toInfo">
                            </a>
                            <div class="WorthBuyingList_item_title">{{ list.look.title }}</div>
                            <div class="WorthBuyingList_item_detail">
                                <div class="WorthBuyingList_item_name">
                                    <img :src="list.look?.avatar" alt="">
                                    <div>{{ list.look.nickname }}</div>
                                </div>
                                <div class="WorthBuyingList_item_upText">
                                    <img src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" alt="">
                                    <div>{{ list.look.readCount }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script setup lang="ts">
import { AnyObject, worthBuyingBaneer, worthBuyingList } from '@/api/sort';
import { onMounted, ref, watch } from 'vue';



// 跳转详情页
const toInfo = () => {
    console.log('跳转详情页');
    
}


// 轮播图数据
const worthBuyingBaneerList = ref<AnyObject[]>([])

const getWorthBuyingBaneer = async () => {
    try {
        let result = await worthBuyingBaneer()
        // console.log(result);
        worthBuyingBaneerList.value = result.data.navList

    } catch (error) {
        console.error(error);
    }
}


// 触底更新数据
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
    if (refreshing.value) {
        goodsList.value = [];
        refreshing.value = false;
    }
    getWorthBuyingList()

    loading.value = false;

};

const onRefresh = () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad();
};


// 获取值得买商品分页列表
const page = ref(1)
const size = ref(2)
const goodsList = ref<AnyObject[]>([])
const getWorthBuyingList = async () => {
    try {
        let result = await worthBuyingList(page.value, size.value)
        goodsList.value.push(...result.data.result)
        page.value++

    } catch (error) {
        console.error(error);

    }
}

onMounted(() => {
    getWorthBuyingBaneer()
    getWorthBuyingList()
})
</script>

<style scoped lang="less">

a{
    color: #333;
}
.worthBuying_info {
    width: 100%;
    background-color: #eee;

    .worthBuying_banners {
        height: 342.5px;
        position: relative;
        width: 100%;

        .worthBuying_banners_title {
            display: flex;
            align-content: center;
            position: relative;
            width: 100%;
            // margin-top: 5px;

            .img_title {
                position: absolute;
                width: 65px;
                height: 34.5px;
                z-index: 20;
                top: 30px;
                left: 5px;

            }

            .title {
                z-index: 20;
                position: absolute;
                left: 75px;
                top: 40px;
                font-size: 15px;
                color: #fff;
            }

            .img_bg {

                // position: absolute;
                width: 100%;
                height: 259px;
            }
        }

        .banners {
            background-color: #ffffff;
            border-radius: 15px;
            width: 355px;
            height: 270px;
            position: absolute;
            top: 210px;
            left: 50%;
            right: 50%;
            transform: translateX(-50%) translateY(-50%);
            margin: 0 auto;

            .my-swipe {
                height: 270px;

                .swipe_item {
                    display: flex;
                    // flex-wrap: wrap;
                    justify-content: space-evenly;

                    .banners_item {
                        margin-top: 20px;
                        text-align: center;

                        img {
                            width: 60px;
                            height: 60px;
                            border-radius: 50%;
                        }

                        .banners_item_title {
                            font-size: 16px;
                            font-weight: bold;
                        }

                        .banners_item_info {
                            font-size: 12px;
                        }
                    }
                }
            }

        }
    }


    .WorthBuyingList {
        column-count: 2;
        padding: 30px 30px 0 10px;
        // justify-content: space-around;
        // display: flex;
        // flex-direction: column;
        // height: 100%;

        .WorthBuyingList_item_left {
            break-inside: avoid;
            width: 172.5px;
            margin-top: 20px;
            background-color: #fff;
            border-radius: 10px;

            .item_left {

                .WorthBuyingList_item_img {
                    // border-radius-top: 10px;
                    border-top-right-radius: 10px;
                    border-top-left-radius: 10px;
                    width: 172.5px;
                }

                .WorthBuyingList_item_title {
                    padding: 9px 8px 0;
                    color: #333;
                    font-size: 14px;
                    line-height: 29px;
                    -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                    inset: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    font-family: PingFangSC-Regular;
                    text-align: left;
                }

                .WorthBuyingList_item_detail {
                    padding: 8.5px 8px 12px 0;
                    display: flex;

                    .WorthBuyingList_item_name {
                        display: flex;
                        padding-left: 10px;

                        img {
                            width: 24px;
                            height: 24px;
                            border-radius: 50%;
                        }

                        div {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: 12px;
                            color: #7f7f7f;
                            height: 48px;
                            line-height: 24px;
                            margin-left: 4px;
                        }
                    }

                    .WorthBuyingList_item_upText {
                        display: flex;
                        padding-left: 20px;
                        padding-top: 5px;

                        img {
                            width: 16px;
                            height: 16px;
                        }

                        div {
                            font-size: 12px;
                            color: #7f7f7f;
                            max-width: 4.5px;
                            text-align: right;
                            height: 16px;
                            line-height: 16px;
                            margin-left: 2px
                        }
                    }
                }
            }
        }

        .WorthBuyingList_item_right {
            break-inside: avoid;
            width: 172.5px;
            margin-top: 20px;
            background-color: #fff;
            border-radius: 10px;

            .item_right {

                .WorthBuyingList_item_img {
                    // border-radius-top: 10px;
                    border-top-right-radius: 10px;
                    border-top-left-radius: 10px;
                    width: 172.5px;
                }

                .WorthBuyingList_item_title {
                    padding: 9px 8px 0;
                    color: #333;
                    font-size: 14px;
                    line-height: 29px;
                    -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                    inset: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    font-family: PingFangSC-Regular;
                    text-align: left;
                }

                .WorthBuyingList_item_detail {
                    padding: 8.5px 8px 12px 0;
                    display: flex;

                    .WorthBuyingList_item_name {
                        display: flex;
                        padding-left: 10px;

                        img {
                            width: 24px;
                            height: 24px;
                            border-radius: 50%;
                        }

                        div {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: 12px;
                            color: #7f7f7f;
                            height: 48px;
                            line-height: 24px;
                            margin-left: 4px;
                        }
                    }

                    .WorthBuyingList_item_upText {
                        display: flex;
                        padding-left: 20px;
                        padding-top: 5px;

                        img {
                            width: 16px;
                            height: 16px;
                        }

                        div {
                            font-size: 12px;
                            color: #7f7f7f;
                            max-width: 4.5px;
                            text-align: right;
                            height: 16px;
                            line-height: 16px;
                            margin-left: 2px
                        }
                    }
                }
            }
        }


        &::after {
            content: '';
            width: 172.5px;
        }
    }

    .van-swipe .van-swipe__indicator {
        width: 20px !important;
        height: 2px !important;
        background-color: red;
    }
}
</style>